<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
   <!-- 只要text/babel这个包，那么下面的都是以严格模式下执行的 -->
   <script type="text/babel">
     // 这个是根组件
     class App extends React.Component{
        constructor(){
            super();
            // 构造器中的this指向组件实例
            this.handle=this.handle.bind(this)
        }
        //    因为到时候点击的时候要改变，所以这个count要放在sate上
        state={
        count:0
    }
    render(){
    //这个是解构
        const {count}=this.state;
        //这个+号是一个记数器   然后这个+号要放在state上  onClick这个是小驼峰的
    // {handle}这个是JS环境，不写的话会变成字符串
    return(
    <div>
          <button onClick={ this.handle}>+</button>
          <p>{count}</p>
          </div>
   )
    }
    //这个只能写在原型方法上或者写在实例上
    handle(){
        alert(1)
        console.log(this);
    }
    } 
    const root =ReactDOM.createRoot(document.getElementById('app'));
    root.render(<App/>)
    // 下面的这个例子就是代表上面的调用的意思
    // 案例：确实是我们做了一人件事情（调用了fn）,shijian才调用，但是根据下边的案例看，shijian的调用方式是默认调用，this指向undefined(严格模式下)
        // function shijian(){

        // }
        //  function fn(){

        //  }
        //  fn
    </script>
</body>
</html>